
import React from 'react'
import ReactDOM from 'react-dom'
import * as UserAction  from '../../actions/UserSettingAction';
import { connect }  from 'react-redux';

import UserSettingTools from './UserSettingTools'
import UserSettingList from './UserSettingList'
import UserSettingEdit from './UserSettingEdit'
import UserSettingCreate from './UserSettingCreate'
import UnitBindDetail from '../units/UnitBindDetail'

import Paging from '../Paging'

class UserSettingBody extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      activeData: {},
      isEdit: false,
      search: "",
      activeDetailId: 0
    }
  }

  componentDidMount() {
    var self = this;
    this.$modal = $(ReactDOM.findDOMNode(this.refs.UserSettingEdit))
    this.$createModal = $(ReactDOM.findDOMNode(this.refs.UserSettingCreate));
    this.$detailModal = $(ReactDOM.findDOMNode(this.refs.UnitBindDetail))
    this.props.dispatch(
      UserAction.loadUsersAsync({})
    )
  }

  componentDidUpdate() {
    // console.log(this.props.offset)
  }

  onCreateClick() {
    this.setState({
      activeData: {},
      isEdit: true
    })
    this.$createModal.modal("show")
  }

  onDataCreate(data) {
    // console.log(data)
    this.props.dispatch(
      UserAction.createUserBindAsync(data)
    )
    this.$createModal.modal("hide")
  }

  onEditClick(index) {
    if (index < this.props.data.length) {
      this.setState({
        activeData: this.props.data[index],
        isEdit: false
      })
      this.$modal.modal("show")
    }
  }

  onDataUpdate(data) {
    // console.log(data)
    data.offset = this.props.offset;
    data.limit = this.props.limit;
    data.unit_desc = this.state.search;
    this.props.dispatch(
      UserAction.updateUsersAsync(data)
    )
    this.$modal.modal("hide")
  }

  onDataSearch(name) {
    var data = {
      unit_desc: name,
      offset: 0,
      limit: this.props.limit
    }
    this.props.dispatch(
      UserAction.loadUsersAsync(data)
    )
    this.setState({
      search: name
    })
  }

  onDeleteClick(id) {
    if (confirm("确定删除吗？")) {
      var data = {
        id: id
      }
      data.offset = this.props.offset;
      data.limit = this.props.limit;
      data.unit_desc = this.state.search;
      this.props.dispatch(
        UserAction.deleteUserBindAsync(data)
      )
      this.$modal.modal("hide")
    }
  }

  onDetailClick(unit_number) {
    this.setState({
      activeDetailId: unit_number
    })

    this.$detailModal.modal("show");
  }

  onPageChange(page) {
    var self = this;
    this.props.dispatch(
      UserAction.loadUsersAsync({
        offset: (page-1)*this.props.limit,
        unit_desc: self.state.search,
        limit: this.props.limit
      })
    )
  }

  render() {
    var self = this;

    var offset = parseInt(this.props.offset),
        limit = parseInt(this.props.limit),
        count = parseInt(this.props.count)

    var current = Math.ceil(offset/limit) + 1;

    return (
      <div className="content-body User-content-body" >
        <UserSettingTools
          onCreateClick = {this.onCreateClick.bind(self)}
          onDataSearch = {this.onDataSearch.bind(self)}
          />
        <UserSettingList
          data = {this.props.data}
          onDeleteClick = {this.onDeleteClick.bind(self)}
          onEditClick = {this.onEditClick.bind(self)}
          onDetailClick = {this.onDetailClick.bind(self)}
          />
        <Paging
          current = {current}
          count = {count}
          limit = {limit}
          onPageChange = {this.onPageChange.bind(self)}
        />
        <UserSettingEdit
          ref = "UserSettingEdit"
          onDataUpdate = {this.onDataUpdate.bind(self)}
          data = {this.state.activeData}
          isEdit = {this.state.isEdit}
          />
        <UserSettingCreate
          ref = "UserSettingCreate"
          onDataCreate = {this.onDataCreate.bind(self)}
        />
        <UnitBindDetail
          ref = "UnitBindDetail"
          activeDetailId = {this.state.activeDetailId}
          />
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
          userSettings: state.userSettings,
          data: state.userSettings.data,
          count: parseInt(state.userSettings.count),
          offset: parseInt(state.userSettings.offset),
          limit: parseInt(state.userSettings.limit)
         }
}

export default connect(mapStateToProps)(UserSettingBody);
